<template>
  <div class="gift-animation" :style="containerStyle">
    <div class="gift" :style="giftStyle"></div>
  </div>
</template>

<script>
export default {
  name: 'GiftAnimation',
  props: {
    width: {
      type: [Number, String],
      default: 60
    },
    height: {
      type: [Number, String],
      default: 60
    },
    imageUrl: {
      type: String,
      default: 'https://huyaimg.msstatic.com/cdnimage/actprop/20365_1_0_prop_streamer_resource_1591770013.png'
    },
    frameCount: {
      type: Number,
      default: 24
    },
    animationDuration: {
      type: [Number, String],
      default: 1
    },
    animationTiming: {
      type: String,
      default: 'steps'
    }
  },
  computed: {
    containerStyle() {
      return {
        display: 'inline-block',
        overflow: 'hidden'
      }
    },
    giftStyle() {
      return {
        width: typeof this.width === 'number' ? `${this.width}px` : this.width,
        height: typeof this.height === 'number' ? `${this.height}px` : this.height,
        backgroundImage: `url(${this.imageUrl})`,
        backgroundRepeat: 'no-repeat',
        animation: `gift ${this.animationDuration}s ${this.animationTiming}(${this.frameCount}) infinite`
      }
    }
  },
  methods: {
    parseDimension(value) {
      if (typeof value === 'number') {
        return value;
      }
      
      const match = value.match(/^(\d+(?:\.\d+)?)(px|em|rem|%|vh|vw|vmin|vmax|cm|mm|in|pt|pc)$/);
      if (!match) {
        console.warn(`Unsupported dimension value: ${value}. Using 0px.`);
        return 0;
      }
      
      const number = parseFloat(match[1]);
      const unit = match[2];
      
      // 只处理px单位，其他单位返回0（实际项目中可能需要更复杂的转换）
      if (unit === 'px') {
        return number;
      }
      
      // 对于非px单位，尝试在运行时获取实际像素值
      if (unit === 'em' || unit === 'rem') {
        const div = document.createElement('div');
        div.style.width = '1' + unit;
        div.style.visibility = 'hidden';
        document.body.appendChild(div);
        const result = div.getBoundingClientRect().width * number;
        document.body.removeChild(div);
        return result;
      }
      
      console.warn(`暂不支持的单位: ${unit}. 使用0px.`);
      return 0;
    },
    generateKeyframes() {
      const styleId = 'gift-animation-keyframes';
      let styleElement = document.getElementById(styleId);
      
      if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.id = styleId;
        document.head.appendChild(styleElement);
      }
      
      const widthInPx = this.parseDimension(this.width);
      const totalWidth = widthInPx * this.frameCount;
      const keyframes = `
        @keyframes gift {
          from { background-position: 0px 0px; }
          to { background-position: -${totalWidth}px 0px; }
        }
      `;
      
      styleElement.textContent = keyframes;
    }
  },
  mounted() {
    this.generateKeyframes();
  },
  watch: {
    width: 'generateKeyframes',
    frameCount: 'generateKeyframes',
    imageUrl: 'generateKeyframes'
  }
}
</script>